import {
  Text,
  View,
  StyleSheet,
  TouchableOpacity,
  ScrollView,
  Image,
} from 'react-native';
import {useContext, useState} from 'react';
import {ThemeContext} from '../../../components/ThemeContextProvider';
import icon_tang from '../../../assets/img/icon_tang.png';
export default function () {
  const {theme} = useContext(ThemeContext);
  const styles = StyleSheet.create({
    root: {
      width: '100%',
      backgroundColor: theme.themeColor,
      paddingVertical: 10,
      borderBottomWidth: 1,
      borderColor: theme.dividerColor,
      marginTop: 10,
    },
    header: {
      flexDirection: 'row',
      justifyContent: 'space-between',
      alignItems: 'center',
    },
    row: {
      flexDirection: 'row',
      alignItems: 'center',
      flex: 1,
      marginRight: 10,
    },
    number: {
      fontSize: 16,
      color: theme.primaryColor,
      flexShrink: 0
    },
    tangIcon: {
      width: 16,
      height: 16,
    },
    name: {
      fontSize: 16,
      color: theme.fontColor,
      marginLeft: 2,
      flex: 1
    },
    desc: {
      fontSize: 14,
      color: theme.font2Color,
      marginTop: 4,
    },
  });
  return (
    <View style={styles.root}>
      <View style={styles.header}>
        <View style={styles.row}>
          <Image source={icon_tang} style={styles.tangIcon}></Image>
          <Text style={styles.name} numberOfLines={2} ellipsizeMode="tail">
            油炸花油炸花生油炸花生油炸花生油炸花生油炸花生油炸花生油炸花生油炸花生油炸花生油炸花生油炸花生油炸花生油炸花生油炸花生生
          </Text>
        </View>
        <Text style={styles.number}>X1</Text>
      </View>
      <Text style={styles.desc} numberOfLines={2} ellipsizeMode="tail">
        不加香菜丨正常冰
      </Text>
    </View>
  );
}
